import React, { Component } from 'react';
//在组件中一定要引入store，store是redux的核心，只有引入了，才能执行store，开启redux
import store from '../../redux/store';

//引入action
import {createIncrementAction,createDecrementAction} from '../../redux/actions/count_action';

export default class index extends Component {
    state = {
        isHot: true,
    }

    render() {
        return (
            <div>
                <h1 onClick={this.changeWea}>今天天气真{this.state.isHot ? '炎热' : '寒冷'}</h1>
                <h2>当前的值是{store.getState()}</h2>
                <div>
                    <select ref={el => this.selectEle = el}>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                    </select>
                    <button onClick={this.increment}>+</button>
                    <button onClick={this.decrement}>-</button>
                    <button onClick={this.incrementOdd}>如果是奇数再加</button>
                    <button onClick={this.incrementWait}>延迟1s再加</button>
                </div>
            </div>
        )
    }

    changeWea = () => {
        const { isHot } = this.state;
        this.setState({ isHot: !isHot })

    }

    increment = () => {
        const { value } = this.selectEle;
        //向store发送要做的事情和数据
        store.dispatch(createIncrementAction(+value))
    }

    decrement = () => {
        const { value } = this.selectEle;
        //向store发送要做的事情和数据
        store.dispatch(createDecrementAction(+value))
    }

    incrementOdd = () => {
        const { value } = this.selectEle;
        if (store.getState() % 2 === 0) return alert('偶数不加');
        //向store发送要做的事情和数据
        store.dispatch(createIncrementAction(+value))
    }

    incrementWait = () => {
        const { value } = this.selectEle;
        setTimeout(() => {
            //向store发送要做的事情和数据
            store.dispatch(createIncrementAction(+value))
        }, 1000)
    }

}
